<template>
  <view class="settings-container">
    <!-- 顶部栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">设置</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 账户设置 -->
    <view class="settings-section">
      <view class="section-item" @tap="navigateToAccountInfo">
        <view class="item-left">
          <text class="item-icon">👤</text>
          <text class="item-text">账户与安全</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
      
      <view class="section-item" @tap="navigateToPrivacySettings">
        <view class="item-left">
          <text class="item-icon">🔒</text>
          <text class="item-text">隐私设置</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
    </view>
    
    <!-- 通知设置 -->
    <view class="settings-section">
      <view class="section-item">
        <view class="item-left">
          <text class="item-icon">🔔</text>
          <text class="item-text">消息通知</text>
        </view>
        <switch :checked="notificationEnabled" @change="toggleNotification"/>
      </view>
      
      <view class="section-item" @tap="navigateToReminderSettings">
        <view class="item-left">
          <text class="item-icon">⏰</text>
          <text class="item-text">提醒设置</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
    </view>
    
    <!-- 权限管理 -->
    <view class="settings-section">
      <view class="section-item" @tap="navigateToPermissionSettings">
        <view class="item-left">
          <text class="item-icon">📱</text>
          <text class="item-text">权限管理</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
      
      <view class="section-item" @tap="checkStorageUsage">
        <view class="item-left">
          <text class="item-icon">💾</text>
          <text class="item-text">存储空间</text>
        </view>
        <text class="storage-info">{{ storageUsage }}</text>
      </view>
    </view>
    
    <!-- 关于 -->
    <view class="settings-section">
      <view class="section-item" @tap="navigateToAbout">
        <view class="item-left">
          <text class="item-icon">ℹ️</text>
          <text class="item-text">关于我们</text>
        </view>
        <text class="version-info">v1.0.0</text>
      </view>
      
      <view class="section-item" @tap="navigateToHelpCenter">
        <view class="item-left">
          <text class="item-icon">❓</text>
          <text class="item-text">帮助与反馈</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-container">
      <button class="logout-btn" @tap="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notificationEnabled: true,
      storageUsage: '128MB/1GB'
    };
  },
  onLoad() {
    // 加载设置信息
    this.loadSettings();
  },
  methods: {
    // 加载设置信息
    loadSettings() {
      // 模拟从本地存储加载设置
      // 实际项目中应该从本地存储或后端获取设置信息
      setTimeout(() => {
        // 模拟加载通知设置
        const savedNotificationSetting = uni.getStorageSync('notificationEnabled');
        if (savedNotificationSetting !== '') {
          this.notificationEnabled = JSON.parse(savedNotificationSetting);
        }
        
        // 模拟加载存储空间信息
        this.updateStorageUsage();
      }, 200);
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 切换通知设置
    toggleNotification(e) {
      this.notificationEnabled = e.detail.value;
      
      // 保存设置到本地存储
      uni.setStorageSync('notificationEnabled', JSON.stringify(this.notificationEnabled));
      
      // 显示提示
      uni.showToast({
        title: this.notificationEnabled ? '通知已开启' : '通知已关闭',
        icon: 'none'
      });
    },
    
    // 更新存储空间信息
    updateStorageUsage() {
      // 模拟获取存储空间信息
      // 实际项目中可以调用微信API获取
      const used = Math.floor(Math.random() * 500) + 50; // 50-550MB
      const total = 1024; // 1GB
      this.storageUsage = `${used}MB/${total}MB`;
    },
    
    // 检查存储空间使用情况
    checkStorageUsage() {
      uni.showLoading({
        title: '获取中...'
      });
      
      // 模拟检查存储空间
      setTimeout(() => {
        uni.hideLoading();
        uni.showModal({
          title: '存储空间',
          content: `已使用: ${this.storageUsage}\n\n建议定期清理缓存以保持应用流畅运行`,
          showCancel: false,
          confirmText: '知道了'
        });
      }, 800);
    },
    
    // 导航到账户信息页面
    navigateToAccountInfo() {
      uni.navigateTo({
        url: '/pages/demo/account-info'
      });
    },
    
    // 导航到隐私设置页面
    navigateToPrivacySettings() {
      uni.navigateTo({
        url: '/pages/demo/privacy-settings'
      });
    },
    
    // 导航到提醒设置页面
    navigateToReminderSettings() {
      uni.navigateTo({
        url: '/pages/demo/reminder-settings'
      });
    },
    
    // 导航到权限管理页面
    navigateToPermissionSettings() {
      uni.navigateTo({
        url: '/pages/demo/permission-settings'
      });
    },
    
    // 导航到关于我们页面
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/demo/about'
      });
    },
    
    // 导航到帮助中心页面
    navigateToHelpCenter() {
      uni.navigateTo({
        url: '/pages/demo/help-center'
      });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        confirmText: '退出',
        confirmColor: '#ff4d4f',
        success: (res) => {
          if (res.confirm) {
            // 模拟退出登录操作
            uni.showLoading({
              title: '退出中...'
            });
            
            setTimeout(() => {
              // 清除登录状态
              uni.removeStorageSync('userInfo');
              uni.removeStorageSync('token');
              
              // 跳转到登录页面
              uni.hideLoading();
              uni.reLaunch({
                url: '/pages/demo/index'
              });
            }, 800);
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.settings-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  padding: 10rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.header-right {
  width: 50rpx;
}

/* 设置区域 */
.settings-section {
  margin-top: 20rpx;
  background-color: #fff;
}

.section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.section-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.item-text {
  font-size: 32rpx;
  color: #333;
}

.arrow-icon {
  font-size: 28rpx;
  color: #999;
}

.storage-info {
  font-size: 28rpx;
  color: #666;
}

.version-info {
  font-size: 28rpx;
  color: #999;
}

/* 退出登录按钮 */
.logout-container {
  padding: 60rpx 40rpx 20rpx;
}

.logout-btn {
  background-color: #ff4d4f;
  color: #fff;
  font-size: 32rpx;
  border-radius: 40rpx;
  padding: 20rpx 0;
}

.logout-btn:active {
  background-color: #ff7875;
}

/* switch 样式 */
switch {
  transform: scale(0.8);
}
</style>